<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>中视场彩色相机</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/bbfont.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="qv.css">
  <style>
    #window {
      fill: #fff;
      stroke: #fc5151;
      stroke-width: 2;
    }

    #target * {
      fill: #007bff;
      stroke: #27dbea;
      stroke-width: 2;
    }

    td > kbd {
      font-size: 12px;
    }
  </style>
</head>
<body id="viewer" class="M1">
<div id="CCC" style="padding: 4px 6px;display: flex;">
  <button class="btn btn-primary btn-sm disactive-btn" onclick="main.realtime()" id="realtime">实时</button>
  <button class="btn btn-primary btn-sm mx-1" id="history" onclick="main.history()">历史</button>
  日期:
  <input id="day" type="date" value="">
  任务:
  <select id="task" class="sele-comp">
  </select>
  图像模式:
  <select id="modes" class="sele-comp" onchange="main.onMode(this.value)"></select>
  最大帧: <label id="frm_max"></label>
  数据帧:
  <input id="frm_input" oninput="this.nextElementSibling.value=this.value" style="min-width: 40px" type="number">
  <input oninput="this.previousElementSibling.value=this.value" id="frm_range" type="range" min="0" max="0" value="0"
         step="1" style="flex-grow: 1;max-width: 300px;">
  <div class="flex-grow-1"></div>
  <button class="btn btn-primary btn-sm"  onclick="main.exportCSV(this)"><i class="fa fa-file-text"></i>下载帧信息</button>

</div>
<div class="d-flex d-flex flex-row" style="height: calc(100vh - 37px)">
  <div class="history position-relative">
    <div id="thumbs" class="h-100 w-100 p-1 position-absolute" style="overflow-y: auto;">
    </div>
  </div>
  <div class="flex-grow-1 d-flex flex-column">
    <div id="ctrl" class="d-flex flex-row bg-light" style="height: 28px">
      <a class="fa fa-image btn  btn-r" onclick="$dld(main.cur_task,main.cur_frame.name+'.jpg')"></a>
      <a class="fa fa-download btn  btn-r" onclick="$dld(main.cur_task,main.cur_frame.name+'.tif')"></a>
      <label title="对比度" class="btn-r btn "><i class="fa fa-adjust"></i>
        <input type="range" value="1" min="0" max="2" step="0.01"></label>
      <label title="亮度" class="btn-r btn "><i class="fa fa-sun-o "></i>
        <input type="range" value="1" min="0" max="2" step="0.01"></label>
      <label title="色调" class="btn-r btn "><i class="fa fa-dashboard "></i>
        <input type="range" value="0" min="0" max="360"> </label>
      <label title="饱和度" class="btn-r btn "><i class="fa fa-certificate "></i>
        <input type="range" value="1" min="0" max="2" step="0.01"> </label>
      <button title="重置" class="btn-r btn " onclick="reset()">
        <i class="fa fa-refresh"></i>
        <i class="fa fa-circle-half"></i>
      </button>
      <span id="pos"></span>
      <span id="info"></span>

    </div>
    <div id="img-viewer" class="flex-grow-1">
      <div class="x-viewer" style="position: absolute;height: 100%;width: 100%;overflow: hidden">
        <img class="x-scale" id="frame_img" alt="" src=""></div>
    </div>
  </div>
  <div class="d-flex flex-column" style="width: 385px">
    <div class="card-header">
      数据
    </div>
    <div class="flex-grow-1  position-relative">
      <div class="position-absolute h-100 w-100" style="overflow-y: auto">
        <table id="params" class="table table-sm table-hover"></table>
      </div>
    </div>
    <svg height=270 width=360 viewBox="0 0 5120 3840" class="bg-dark" style="border-top: 1px solid #aaa">
      <rect id="window" class="bg-light">
        <title id="w-title"></title>
      </rect>
      <text id="w-desp" x="100" y="300" font-size="200" fill="#09f"></text>
      <g id="target">
        <circle></circle>
      </g>
    </svg>
  </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js?12"></script>
<script src="qv.js"></script>
<script src="cam-qv.js"></script>
<script>
  MODE = {
    0b1111: '压缩模式',
    0b0000: '全图输出',
    0b0011: '2:1像素合并输出',
    0b0101: '4:1像素合并输出',
    0b0110: '8:1像素合并输出',
    0b1001: '手动开窗模式',
    0b1010: '自主开窗模式'
  }
  const BSF_CONST = {
    0x11: '无损压缩', 0x22: '2:1压缩', 0x33: '3:1压缩', 0x44: '4:1压缩', 0x66: '6:1压缩', 0x88: '8:1压缩', 0xCC: '12:1压缩'
  }

  let $TGT = $$('#target')
  let amac_params = [

    {n: "帧序号", k: "fcnt", v: v => v,r: '4X'},
    {n: "压缩比", k: "bsf", v: (v) => BSF_CONST[v] || '-', r: '2X'},
    {n: "工作模式", k: "wk", v: v => v, r: '4b'},
    {n: "曝光模式", k: "lt", v: v => v, r: '4b'},
    {n: "图像模式", k: "im", v: v => v, r: '4b'},
    {n: "输出状态", k: "ot", v: v => v, r: '4b'},
    {n: "开窗", k: "window", v: v => v, t: '窗口起始行,窗口起始列,窗口行数,窗口列数'},
    {n: "目标中心行号", k: "targetrow", v: v => v, r: '2X', t: '中心行号'},
    {n: "目标中心列号", k: "targetcol", v: v => v, r: '2X', t: '中心列号'},
    {n: "目标像素数", k: "targetpix", v: v => v, r: '2X', t: '像素数'},
    {n: "曝光时间", k: "exposure_t", v: v => v, u: 'μs', r: '5X'},
    {n: "平均灰度计算", k: "grayscale_c", v: v => v, r: '3X'},
    {n: "平均灰度期望", k: "grayscale_r", v: v => v, r: '5X'},
    {n: "背景阈值", k: "background_r", v: v => v, r: '3X'},
    {n: "自动曝光约束", k: "auto_exposure_t", v: v => v, u: 'μs', t: '自动曝光时间约束值', r: '5X'},
    {n: "曝光时刻", k: "ts", v: v => BJT(v)},
    {n: "输出图像帧序号", k: "imgc", v: v => v, r: '2X'},
    {n: "总包数", k: "pkgc", v: v => v, t: '图像数据总包数', r: '4X'},
  ]

  class XPage extends CamViewer {
    constructor() {
      super('AMAC', amac_params);
    }

    params(v) {
      super.params(v);
      let r = v.info
      $('#title').html(`<div class="d-flex justify-content-between"><label>序号 ${v.frm}</label> <label>${BJT(v.st)}</label></div>`)
      let win = $$('#window')
      let w = r.window
      if (r.im === '全图输出') w = [0, 0, 3840, 5210]
      // r.im="开窗测试"
      $$('#w-desp').textContent = '图像模式:' + r.im;
      $$('#w-title').textContent = `X:${w[1]},Y:${w[0]}, H: ${w[2]} W:${w[3]}`
      win.setAttribute('width', w[3])
      win.setAttribute('height', w[2])
      win.setAttribute('x', w[1])
      win.setAttribute('y', w[0])
      let tg = r.target
      $TGT.setAttribute('transform', `translate(${tg[1]},${tg[0]})`)
      $TGT.querySelector('circle').setAttribute('r', Math.sqrt(tg[2]))

    }
    renderMode() {
        let r = {};
        let selected = this.$mode.value
        this.frames_ori.forEach((v) => r[v.mode] = (r[v.mode] || 0) + 1)
        let fr = Object.keys(r).filter(v => (MODE[v] && [v])).map(v => `<option value="${v}">${MODE[v]} / ${r[v]}</option>`)
        $('#modes').html(`<option value="-1">不限</option>` + fr.join(''));

        if (selected && r[selected]) {
          this.$mode.value = selected
          return
        }
        this.$mode.selectedIndex = 0
      }
      filter_frames(mode) {
        this.frames = mode ? this.frames_ori.filter(
          v => (mode === undefined || mode==-1 || v.mode == mode)
        ).map(
          (v, i) => Object.assign(v, {frm_: i})
        ): this.frames_ori.map((v,i)=>Object.assign(v, {frm_: i}))
        this.resetFrmInput()
        this.set_thumbs()
      }
  }

  var main = new XPage()
  main.realtime()

</script>
</body>
</html>